
import { PureComponent } from 'react';
import { isNull, calcField } from '../../utils/helper';
import MAction from '../MAction/MAction';
interface Props {
  list: any,//类型为object
  thresholds?: any,
  colors?: any[],
  strokeWidth?: any,
  percent?: any,
  desc?: any,
  componentStyle?: object,
  dataset_key?: string,
  event_key?: string
}
interface State {

}

export default class MiMiniSubProgress extends PureComponent<Props, State> {
  public state: State = {

  }
  renderText = (item, isHtml = true) => {
    if (isNull(item)) {
      return null;
    }
    else {
      let { list } = this.props;
      let { text, style } = item;
      text = calcField(text, list);
      if (isHtml) {
        return (
          <div style={style} dangerouslySetInnerHTML={{ __html: text }}></div>
        )
      }
      else {
        return text;
      }
    }
  }
  //渲染分段
  renderThresholds = () => {
    let { thresholds } = this.props;
    if (isNull(thresholds)) {
      return null;
    }
    thresholds = thresholds.toString().split(",");
    let el = [];
    thresholds.map((item, key) => {
      el.push(
        <div key={key} style={{ position: "absolute", left: item + "%", bottom: 0, top: 0, marginLeft: "-1px" }}>
          <span style={{ width: "2px", height: "4px", background: "#1890ff", display: "block" }}></span>
          <span style={{ width: "2px", height: "4px", background: "#1890ff", display: "block", position: 'absolute', bottom: 0 }}></span>
        </div>
      )
    })
    return (
      el
    )
  }
  renderPercent = (percent) => {
    percent = percent * 1;
    let { colors, thresholds } = this.props;
    let color = "#1890ff";
    if (isNull(thresholds) || percent <= 0) {

    }
    else {
      thresholds = thresholds.toString().split(",");
      if (percent <= thresholds[0]) {
        color = colors[0]
      }
      else if (percent > thresholds[thresholds.length - 1]) {
        color = colors[thresholds.length]
      }
      else {
        thresholds.map((item, key) => {
          if (key > 0) {
            if (percent > thresholds[key - 1] && percent <= item) {
              color = colors[key]
            }
          }
        })
      }
    }
    if (isNull(color)) {
      color = "#1890ff"
    }
    return (
      <div style={{ width: percent + "%", height: "100%", background: color }}>

      </div>
    )
  }
  render() {
    let { strokeWidth, percent, desc, componentStyle } = this.props;
    let { list, dataset_key } = this.props;
    if (!isNull(dataset_key) && list instanceof Array) {
      return null;
    }
    strokeWidth = isNull(strokeWidth) ? 8 + 10 : strokeWidth + 10;
    percent = calcField(percent, list);
    return (
      <div data-flex="cross:center dir:left box:last" style={{ padding: '5px', ...componentStyle }} onClick={() => {
        MAction({ ...this.props }, this.props.event_key);
      }}>
        <div style={{ padding: "5px 0", height: strokeWidth + "px", position: "relative" }}>
          <div style={{ width: "100%", height: "100%", background: "#f5f5f5" }}>
            {
              this.renderPercent(percent)
            }
          </div>
          {
            this.renderThresholds()
          }
        </div>
        <div>
          {
            this.renderText(desc)
          }
        </div>

      </div>

    )
  }
}